<template>
    <div class="user">
        <header-nav></header-nav>
        <div class="container">
            <side-bar-top></side-bar-top>
            <div class="content">
                <div class="panel">
                    <h3 class="topic-title">{{topicDetail.title}}</h3>
                    <div class="header">
                        <router-link :to="'/user/' + topicDetail.author_name" class="user_avatar left">
                            <img :src="require('@/assets/images/avatar.jpg')" alt="">
                        </router-link>
                        <div class="detail-title">
                            <strong>
                                <router-link class="author_name" :to="'/user/' + topicDetail.author_name">{{topicDetail.author_name}}</router-link>
                            </strong>
                            <span>发布于 {{days(topicDetail.create_at)}} · 来自{{topicDetail.tab_value}}</span>
                            <span class="edit-topic" v-if="topicDetail.author_id === user_id">
                                <router-link :to="'/topic/' + topicDetail._id + '/edit'" class="icons2">
                                    <i class="el-icon-edit-outline" title="编辑"></i>
                                </router-link>
                                <i class="el-icon-delete icons2" title="删除" @click="clickDeleteTopic(topicDetail._id)"></i>
                            </span>
                            <el-button class="right" @click="collectTopicFuc()" type="success" v-if="!collected">收藏</el-button>
                            <el-button class="right" @click="removeCollectFuc()" v-if="collected">取消收藏</el-button>

                            <div class="small-info clear">
                                <div class="icons left" title="回复数">
                                    <i class="fa fa-comment-o"></i> 
                                    <span class="number">{{topicDetail.reply_count}}</span>
                                </div>
                                <div class="icons left" title="点击数">
                                    <i class="fa fa-eye"></i> 
                                    <span class="number">{{topicDetail.visit_count}}</span>
                                </div>
                                <div class="icons left" title="收藏数">
                                    <i class="fa fa-star"></i> 
                                    <span class="number">{{topicDetail.collect_count}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="content-text">
                        <div v-html="compiledMarkdown" v-highlight></div>
                    </div>
                </div>
                <div class="panel" v-if="replies !== null">
                    <div class="header">评论</div>
                    <div class="reply_box">
                        <ul>
                            <li class="row clear" v-for="(item, index) in replies" :key="index">
                                <div class="avatar left">
                                    <router-link :to="'/user/' + item.author.loginName" class="user_avatar left">
                                        <img :src="require('@/assets/images/avatar.jpg')" alt="">
                                    </router-link>
                                </div>
                                <div class="content-box">
                                    <strong>
                                        <router-link class="author_name" :to="'/user/' + item.author.loginName">{{item.author.loginName}}</router-link>
                                    </strong>
                                    <span class="relativeTime">· {{days(item.update_at)}}</span>
                                    <span class="author" v-if="topicDetail.author_id === item.reply_id">作者</span>
                                    <div class="right slef-active" v-if="user_id === item.reply_id">
                                        <!-- <el-button class="reply-btn right" @click="(item.author._id)">回复</el-button> -->
                                        <i class="el-icon-edit-outline edit-del-icon" title="编辑" @click="editReply(item._id, item.content, index)"></i>
                                        <i class="el-icon-delete right edit-del-icon" title="删除" @click="clickDeleteReply(item._id)" ></i>
                                    </div>
                                    
                                    <div class="r_content">
                                        {{item.content}}
                                    </div>
                                    <div v-if="user_id === item.reply_id && edit_id === item._id">
                                        <textarea v-model="re_edit_content" class="r_textarea re_edit" placeholder="我们都是有操守有底线的有志青年" />
                                        <el-button class="right" type='success' @click="submitEditReply()">确定</el-button>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="panerl">
                    <!-- <mavon-editor v-model="r_cotent" :subfield='false' /> -->
                    <textarea v-model="r_cotent" class="r_textarea" placeholder="我们都是有操守有底线的...">
                    </textarea>
                    <el-button @click="submitReply()" class="right el-button--success submitBtn">发布评论</el-button>
                </div>
            </div>
        </div>
    </div>

</template>
<script>
    import HeaderNav from "@/components/header/header"
    import SideBarTop from "@/components/sidebar/sidebartop"
    import { getStore, relativeTime } from "@/config/mUtils"
    import { getTopic, getTopicDetail,
            replyTopic, collectTopic, 
            removeCollect, delReply,
            replyUpdate, delTopic
            } from "@/service/api"
    import marked from 'marked'

    export default {
        data() {
            return {
                topicDetail: {},
                replies: null, //回复列表
                content: '', //详情内容
                r_cotent: '', //回复内容
                topic_id: '', //该话题ID
                collected: false, //是否已经收藏该话题,
                user_id: '', //当前用户的id
                re_edit_content: '', //重新编辑回复内容
                edit_id: '', //要重新编辑的id
                edit_index: '', //编辑的回复的第index条
            }
        },
        mounted(){
            this.user_id = getStore('user_id');
            this.topic_id = this.$route.params.tid
            this.getTopicDetail()
        },
        computed: {
            compiledMarkdown: function() {
                return marked(this.content, { sanitize: true })
            }
        },
        methods: {
            days(time) {
                return relativeTime(time)
            },
            async getTopicDetail() {
                let param = {
                    topic_id: this.topic_id,
                }
                let res = await getTopicDetail(param)
                if(res.code) {
                    // console.log(res)
                    this.topicDetail = res.result.topic
                    this.replies = res.result.replies
                    this.content = this.topicDetail.content
                    this.collected = res.result.collected
                } else {
                    // console.log(res.data.error)
                    this.$message.error(res.msg)
                }
            },
            //点击删除话题
            clickDeleteTopic(topic_id){
                this.$confirm('此操作将删除此话题, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                .then(() => {
                    this.deleteTopic(topic_id)
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
                });
            },
            //确认删除此话题
            async deleteTopic(_id) {
                let params = {
                   topic_id: _id
                }
                let res = await delTopic(params)
                if(res.code) {
                    this.$message({
                        message: res.msg,
                        type: 'success'
                    })
                    this.$router.go(-1)
                } else {
                    this.$message.error(res.msg)
                }
            },
            //提交回复
            async submitReply() {
                let param = {
                    topic_id: this.topic_id,
                    reply_id: this.user_id,
                    r_content: this.r_cotent
                }
                let res = await replyTopic(param)
                if(res.code) {
                    // console.log(res)
                    this.getTopicDetail();
                    this.r_cotent = '';
                    this.$message({
                        message: res.msg,
                        type: 'success'
                    })
                } else {
                    this.$message.error(res.msg)
                }
            },
            //点击删除回复按钮
            clickDeleteReply(_id) {
                this.$confirm('此操作将删除此条回复, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                .then(() => {
                    this.deleteReply(_id)
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
                });
            },
            //确认删除回复
            async  deleteReply(_id) {
                let params = {
                    reply_id: _id
                }
                let res = await delReply(params)
                if(res.code) {
                    this.$message({
                        message: res.msg,
                        type: 'success'
                    })
                    //过滤掉已经删除的回复
                    this.replies = this.replies.filter(function(item){
                        return item._id !== _id
                    })
                    if(this.replies.length === 0) {
                        this.replies = null
                    }
                } else {
                    this.$message.error(res.msg)
                }
            },
            //点击修改编辑按钮
            editReply(id, content, index) {
                if(id) {
                    this.edit_id = id
                    this.re_edit_content = content
                    this.edit_index = index
                }
            },
            //提交修改后的内容
            async submitEditReply() {
                let param = {
                    edit_id: this.edit_id,
                    re_t_content: this.re_edit_content
                }

                let res = await replyUpdate(param)
                if(res.code) {
                    //实时更新修改的回复内容
                    this.replies[this.edit_index].content = param.re_t_content
                    this.$message({
                        message: res.msg,
                        type: 'success'
                    })
                    this.edit_id = ''
                    this.re_t_content = ''
                } else {
                    this.$message.error(res.msg)
                    // console.log(res)
                }
            },
            //收藏话题
            async collectTopicFuc() {
                let param = {
                    topic_id: this.topic_id,
                }

                let res = await collectTopic(param);
                if(res.code) {
                    this.collected = true
                    this.$message({
                        message: res.msg,
                        type: 'success'
                    })
                } else {
                    this.$message.error(res.msg)
                }
            },
            //取消收藏
            async removeCollectFuc() {
                let param = {
                    topic_id: this.topic_id,
                }
                let res = await removeCollect(param);
                if(res.code) {
                    this.collected = false
                    this.$message({
                        message: res.msg,
                        type: 'success'
                    })
                } else {
                    this.$message.error(res.msg)
                }
            }
            
        },
        components: {
            HeaderNav,
            SideBarTop
        }
    }
</script>

<style lang="scss" scoped >
    @import '../../style/mixin';

    .user {
        .container {
            .author_name {
                color: $color3;
                font-size: 16px;
            }
            margin-top: 10px;
            .header {
                // line-height: 40px;
                color: $color7;
                img {
                    width: 50px;
                    height: 50px;
                    border-radius: 3px;
                    margin-right: 10px;
                }
                .edit-topic {
                    margin-left: 5px;
                    cursor: pointer;
                }
                .detail-title {
                    padding-left: 60px;
                    .small-info {
                        margin-top: 5px;
                    }
                }
            }
        }
        .content-text {
            padding: 20px;
        }
        .submitBtn {
            margin: 10px 0;
        }

        .reply_box {
            li.row {
                padding: 10px;
                border-bottom: 1px solid $title-bg;
                &:last-child {border-bottom: none;}
                .content-box {
                    padding-left: 40px;
                    .slef-active {
                        display: none;
                    }
                    .edit-del-icon {
                        font-size: 20px;
                        margin: 5px;
                        cursor: pointer;
                    }
                    .reply-btn {
                        padding: 8px 10px;
                        // display: none;
                    }
                }
                &:hover {
                    background-color: $title-bg;
                    .slef-active {
                        display: block;
                    }
                    // .reply-btn {
                    //     display: block;
                    // }
                }
                .avatar {
                    margin-right: 10px;
                    .user_avatar {
                        width: 30px;
                        height: 30px;
                        border-radius: 5px;
                        overflow: hidden;
                    }
                }
                
                .r_content {
                    padding: 10px;
                    color: $color7;
                }
                .relativeTime {
                    color: $fontC3;
                }
                .author {
                    background-color: $main;
                    padding: 2px 5px 3px;
                    border-radius: 2px;
                    color: $fff;
                    margin-left: 5px;
                    font-size: 12px;
                }
                .re_edit {
                    min-height: 50px;
                }
            }   
        }
        .r_textarea {
            resize: vertical;
            width: 100%;
            min-height: 100px;
            max-height: 300px;
            padding: 10px;
            color: $color7;
            line-height: 26px;
            border-radius: 5px;
            &:focus {
                outline: none;
            }
        }
        .topic-title {
            padding: 10px;
            font-size: 24px;
            color: $color3;
            text-align: left;
        }
    }
    
    
</style>

